<template>
  <li>
    <header>介绍</header>
    <ul>
      <li>Vue.js是什么</li>
      <li>起步</li>
      <li>
        声明式渲染
        <binding/>
      </li>
      <li>
        条件与循环
        <statement/>
      </li>
      <li>
        处理用户输入
        <event/>
      </li>
      <li>
        组件化应用构建
        <ol>
          <li>与自定义元素的关系</li>
        </ol>
        <section>
          <ol>
            <todo-item v-for="(item, index) in groceries" :key="index" v-bind:todo="item"/>
          </ol>
        </section>
        <section>
          <app-nav/>
          <app-view/>
        </section>
      </li>
      <li>准备好了吗？</li>
    </ul>
  </li>
</template>

<script>
import Binding from "./samples/Binding";
import Statement from "./samples/Statement";
import Event from "./samples/Event";
import TodoItem from "./samples/TodoItem";
import AppNav from "./samples/AppNav";
import AppView from "./samples/AppView";

export default {
  name: "Introduction",
  components: {
    Binding,
    Statement,
    Event,
    TodoItem,
    AppNav,
    AppView
  },
  data() {
    return {
      groceries: [
        { id: 0, text: "蔬菜" },
        { id: 1, text: "奶酪" },
        { id: 2, text: "随便其它什么人吃的东西" }
      ]
    };
  }
};
</script>